<template>
 <div class="kui-content-wrap">
    <div class="kui-wrap-desk kui-flex kui-flex-between kui-flex-middle">
      <Breadcrumb class="kui-desk-nav">
        <BreadcrumbItem to="/">我的工作台</BreadcrumbItem>
        <BreadcrumbItem>租赁开单</BreadcrumbItem>
      </Breadcrumb>
    </div>
    <div class="kui-wrap-body">
      <div class="kui-body-section">
          <div class="kui-section-item">
            <div class="kui-item-bd kui-table-panel">
              <div class="kui-table-sc">
                <Form class="kui-form-panel" ref="formData" :model="temporaryData" :label-width="90" label-position="left">
                <FormItem label="客户id：" placeholder="请在下方选择">
                  <Input v-model="temporaryData.customer" disabled/>
                </FormItem>
                <FormItem label="付款方式：">
                  <Select v-model="temporaryData.paymode" placeholder="请选择">
                      <Option :value="1">一次付款</Option>
                      <Option :value="2">分期付款</Option>
                  </Select>
                </FormItem>
                <FormItem  style="max-width:100%;" v-for="(item, index) of temporaryData.payment" :key="index" label="付款明细：">
                  <Input style="width:200px;display: inline-block;" clearable v-model="item.money" placeholder="请输入付款金额"/>
                  <DatePicker v-model="item.time" clearable format="yyyy-MM-dd HH:mm" type="datetime" placeholder="请选择付款时间" style="width: 200px;display: inline-block;margin-left: 12px;"></DatePicker>
                  <Select v-model="item.state" clearable style="width: 200px;display: inline-block;margin-left: 12px;" placeholder="请选择">
                      <Option :value="1">已付</Option>
                      <Option :value="-1">未付</Option>
                  </Select>
                </FormItem>
                <FormItem v-if="temporaryData.paymode === 2">
                  <Button type="primary" @click="clickDeletePay">删除付款</Button>
                  <Button type="primary" style="margin-left: 12px;"  @click="clickAddPay">新增付款</Button>
                </FormItem>
                <FormItem  style="max-width:100%;" v-for="(lis, index) in temporaryData.board" :key="`a${index}`" label="展位明细：">
                  <Input style="width:200px;display: inline-block;" clearable v-model="lis.id" placeholder="请输入展位ID" disabled/>
                  <DatePicker v-model="lis.start" type="datetime" clearable format="yyyy-MM-dd HH:mm" placeholder="请选择展位开始时间" style="width: 200px;display: inline-block;margin-left: 12px;"></DatePicker>
                  <DatePicker v-model="lis.end" type="datetime" clearable format="yyyy-MM-dd HH:mm" placeholder="请选择展位结束时间" style="width: 200px;display: inline-block;margin-left: 12px;"></DatePicker>
                  <Button type="primary" style="margin-left: 12px;" @click="clickDeleteBoard">删除展位</Button>
                </FormItem>
                <FormItem label="订单备注：">
                  <Input v-model="temporaryData.info" type="textarea" placeholder="请输入"/>
                </FormItem>
                <FormItem>
                  <Button type="primary" @click="clickPostData">提交</Button>
                </FormItem>
              </Form>
              </div>
            </div>
          </div>
          <div class="kui-section-item">
            <div class="kui-table-panel">
                <Form class="kui-form-panel" ref="searchForm" inline :v-model="searchVal">
                  <FormItem>
                    <Input v-model="customerVal" placeholder="请输入客户编号"/>
                  </FormItem>
                  <FormItem>
                    <Button @click="customerSearchFun" icon="ios-search">搜索</Button>
                  </FormItem>
                  <FormItem>
                    <Button @click="customerReset">重置</Button>
                  </FormItem>
                </Form>
                <Table class="kui-table-bd"
                    border 
                    size="small"
                    height="300"
                    :columns="customerTitle" 
                    :data="customerData"
                    v-if="customerData !== null">
                    </Table>
                <div class="kui-table-ft" v-if="customerTotal">
                  <Page class="kui-page-current"
                        :total="customerTotal"
                        :page-size="20"
                        size="small"
                        @on-change="clickCustomerPages">
                  </Page>
              </div>
            </div>
          </div>
          <div class="kui-section-item">
            <div class="kui-table-panel">
                <Form class="kui-form-panel" ref="searchForm" inline :v-model="searchVal">
                  <FormItem>
                    <Input v-model="searchVal" placeholder="请输入展位编号"/>
                  </FormItem>
                  <FormItem>
                    <Button @click="boardSearchFun" icon="ios-search">搜索</Button>
                  </FormItem>
                  <FormItem>
                    <Button @click="boardReset">重置</Button>
                  </FormItem>
                </Form>
              <Table class="kui-table-bd"
                    border 
                    size="small"
                    height="300"
                    :columns="boardTitle" 
                    :data="boardData"
                    v-if="boardData !== null">
                    </Table>
              <div class="kui-table-ft" v-if="boardTotal">
                <Page class="kui-page-current"
                      :total="boardTotal"
                      :page-size="20"
                      size="small"
                      @on-change="clickBoardPages">
                </Page>
              </div>
            </div>
          </div>
        </div>
      </div>
 </div>
</template>

<script>
export default {
  data() {
    return {
      //展位数据
      boardData: [], 
      boardTotal: null,
      boardTitle: [
        {
          title: 'ID',
          key: 'id',
          width: 70,
          align: 'center',
          ellipsis: 'true'
        },
        {
          title: '展位编号',
          key: 'no',
          width: 180,
          align: 'center',
          ellipsis: 'true'
        },
        {
          title: '所属分类',
          key: 'cate',
          width: 180,
          align: 'center',
          ellipsis: 'true'
        },
        {
          title: '所在区域',
          key: 'area',
          width: 200,
          align: 'center',
          ellipsis: 'true'
        },
        {
          title: '展位规格',
          width: 200,
          key: 'spec',
          align: 'center',
          ellipsis: 'true'
        },
        {
          title: '详细地址',
          minWidth: 300,
          key: 'address',
          align: 'center',
          ellipsis: 'true'
        },
        {
          title: '操作',
          key: 'action',
          width: 80,
          fixed: 'right',
          align: 'center',
          render: (h, parent) => {
            return h('div', [
              h(
                'Button',
                {
                  props: {
                    type: 'primary',
                    size: 'small'
                  },
                  on: {
                    click: () => {
                      this.clickAddBoard(parent.row.id)
                    }
                  }
                },
                '添加'
              )
            ])
          }
        }
      ],
      //用户数据
      customerData: [],
      customerTotal: null,
      customerTitle: [
        {
          title: 'ID',
          key: 'id',
          width: 100,
          align: 'center',
          ellipsis: 'true'
        },
        {
          title: '客户编号',
          width: 120,
          key: 'no',
          align: 'center',
          ellipsis: 'true'
        },
        {
          title: '客户名称',
          key: 'name',
          minWidth: 220,
          align: 'center',
          ellipsis: 'true'
        },
        {
          title: '联系电话',
          minWidth: 130,
          key: 'phone',
          align: 'center',
          ellipsis: 'true'
        },
        {
          title: '备用号码',
          minWidth: 130,
          key: 'mobile',
          align: 'center',
          ellipsis: 'true'
        },
        {
          title: '联系人',
          minWidth: 220,
          key: 'linkman',
          align: 'center',
          ellipsis: 'true'
        },
        {
          title: '操作',
          key: 'action',
          width: 80,
          fixed: 'right',
          align: 'center',
          render: (h, parent) => {
            return h('div', [
              h(
                'Button',
                {
                  props: {
                    type: 'primary',
                    size: 'small'
                  },
                  on: {
                    click: () => {
                      this.clickAddCustomer(parent.row)
                    }
                  }
                },
                '添加'
              )
            ])
          }
        }
      ],
      selectedArr: [],
      customerId: null, //修改数据临时存放
      searchVal: null,  //搜索临时存放 展位
      customerVal: null, //搜索临时存放 客户
      temporaryData: {
        customer: null,
        paymode: 1,
        payment:[
          {
            money: null,
            time: null,
            state: 1
          }
        ],
        board: []
      },
      statePayment: false,
      stateBoard: false
    }
  },
  methods: {
    //获取数据 展位数据
    async boardGetData(page) {
      const app = this
        let { data } = await app.$axios.get('/master/v1/board',{
          params: {
            page,
            state: 1
          }
        })
        if (data.code === 100) {
          app.boardData = data.result.data
          app.boardTotal = data.result.total
        }
    },
    //获取数据 客户数据
    async customerGetData(page) {
      const app = this
        let { data } = await app.$axios.get(`/master/v1/customer?page=${page}`)
        if (data.code === 100) {
          app.customerData = data.result.data
          app.customerTotal = data.result.total
          
        }
    },
    //搜索数据 展位数据
    async boardSearch(page) {
      const app = this
        let { data } = await app.$axios.get('/master/v1/board', {
          params: {
            page,
            state: 1,
            no: app.searchVal
          }
        })
        
        if (data.code === 100) {
          app.boardData = data.result.data
          app.boardTotal = data.result.total
        } else {
          app.$Message.error(data.msg)
        }
    },
    //搜索数据 客户数据
    async customerSearch(page) {
      const app = this
        let { data } = await app.$axios.get('/master/v1/customer',{
          params: {
            page,
            no: app.customerVal
          }
        })
        if (data.code === 100) {
          app.customerData = data.result.data
        }
    },
    //提交按钮
    clickPostData() {
      const app = this
      if(app.temporaryData.customer !== null && app.temporaryData.customer.board !== null){
          app.postData(app.temporaryData)
          
          app.temporaryData = {
            customer: null,
            paymode: 1,
            payment:[
              {
                money: null,
                time: null,
                state: 1
              }
            ],
            board: []
          }

      }else {
        app.$Message.error('请选择客户和展位')
      }
      
      
    },
    //发送数据
    async postData(list) {
      const app = this
      let { data } = await app.$axios.post('/user/v1/order', list)
      if (data.code === 100) {
        app.$Message.success('提交成功')
      } else {
        app.$Message.error(data.msg)
      }
    },
    // 清除搜索 展位
    boardReset() {
      this.stateBoard = false
      this.searchVal = ''
      this.boardGetData(1)
    },
    // 清除搜索 客户
    customerReset(){
      this.statePayment = false
      this.customerVal = ''
      this.customerGetData(1)
    },
    //翻页操作
    // 客户
    clickCustomerPages(page) { 
      this.statePayment ? this.customerSearch(page) : this.customerGetData(page)
    },
    // 展位
    clickBoardPages(page) { 
      this.stateBoard ? this.boardSearch(page) : this.boardGetData(page)
    },
    //搜索操作
    //展位搜索
    boardSearchFun() {
      this.boardSearch(1)
      this.state = true
    },
    //客户搜索
    customerSearchFun() {
      this.customerSearch(1)
    },
    // 新增付款
    clickAddPay(){
      this.temporaryData.payment.push({
            money: null,
            time: null,
            state: null
          })
    },
    // 删除付款
    clickDeletePay() {
      if(this.temporaryData.payment.length > 1){
        this.temporaryData.payment.pop()
      }else {
        this.$Message.error('至少要有一个付款！')
      }
    },
    // 新增展位
    clickAddBoard(id) {
      const app = this
      for(let i = 0; i < app.temporaryData.board.length;i++)
        if(id === app.temporaryData.board[i].id){
            app.$Message.error('不能重复添加！')
            return
        }
      this.temporaryData.board.push({
            id: id,
            start: null,
            end: null
          })
    },
    //删除展位
    clickDeleteBoard() {
        this.temporaryData.board.pop()
    },
    clickAddCustomer(list) {
      const app = this
      this.temporaryData.customer = list.id
          
    },
    //新增客户
    customerAdd() {
      const app = this
      app.temporaryData.customer = app.customerId
    }
  },
  
  created() {
    this.boardGetData(1)
    this.customerGetData(1)
  }
}
</script>

<style lang="less" scoped></style>
